<template>
  <div>这是详情页面 - {{ id }}</div>
</template>

<script>
export default {
  // props: ["id"],
  data() {
    return {
      id: "",
    };
  },
  // 通过this.$route.params.id拿到动态参数
  // this.$route表示的是当前路由信息(和url相关的一些信息)

  // 当从一个详情页跳转到另外一个详情页的时候
  // vue会认为直接复用原来的组件更加高效，所以没有销毁和重新创建
  // 没有重新创建，意味着不会再走created等生命周期
  created() {
    // console.log(this.$route);
    // console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    // 数据请求
  },

  // watch: {
  //   // 监听url的改变
  //   $route(to, from) {
  //     console.log(to.params.id);
  //     this.id = this.$route.params.id;
  //   },
  // },

  // 场景：猜你喜欢
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    console.log(666);
    this.id = to.params.id;
  },
};
</script>
